<template>
  <div class="main">
    <div class="title">基线&学习</div>
    <div class="headerInput">
      <div></div>
      <a-form layout="inline" style="width:100%">
        <a-form-item label="SolutionName">
          <a-input placeholder v-model.trim="DSloution" allowClear />
        </a-form-item>
        <a-form-item label="Library">
          <a-select
            show-search
            option-filter-prop="children"
            :filter-option="filterOption"
            allowClear
            v-model="DLibrary"
          >
            <a-select-option
              v-for="(item, index) in LibraryInfo"
              :key="index"
              :value="item"
            >{{ item }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item class="ml150">
          <a-button type="primary" icon="search" @click="search">Search</a-button>
        </a-form-item>
        <a-form-item class="ml50">
          <a-button type="danger" @click="add">
            <a-icon type="plus-circle" />Add
          </a-button>
        </a-form-item>
        <a-form-item class="ml50">
          <a-button type="primary" @click="reset">
            <a-icon type="delete" />Reset
          </a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="tableSection">
      <a-table :data-source="tableData" :customRow="clickKindTable" :pagination="false">
        <a-table-column
          key="Solutuions"
          title="SolutuionName"
          data-index="SolutionName"
          ellipsis="true"
        />
        <a-table-column key="Library" title="Library" data-index="Library" />
        <a-table-column key="CreateBy" title="CreateBy" data-index="CreateBy" />
        <a-table-column key="CreateTime" title="CreateTime" data-index="CreateTime" />
        <a-table-column key="Remark" title="Remark" data-index="Remark" />

        <a-table-column key="action" title="Action">
          <template slot-scope="text, record">
            <span>
              <a-button type="primary" @click="editMoudule(text,record)">Edit</a-button>
              <a-button type="primary" @click="delMoudule(text,record)" class="mr30">Delete</a-button>
            </span>
          </template>
        </a-table-column>
      </a-table>

      <a-pagination
        v-model="currentPage"
        show-size-changer
        show-quick-jumper
        :page-size.sync="pageSize"
        :total="totalCount"
        @showSizeChange="changePage"
        @change="changePage"
        class="pagination"
      />
    </div>

    <!-- 弹窗部分 :maskClosable="false" -->
    <a-modal
      v-model="moudelVisible"
      :title="ModalTitle"
      @ok="handleOk"
      @cancel="cancleSubmit"
      destroyOnClose
      :maskClosable="false"
    >
      <div class>
        <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="SolutionName">
            <a-input placeholder v-model="SolutionName" />
          </a-form-item>
          <a-form-item label="SolutionImage">
            <AvatarUpload @getAvatar="getAvatar" :propImageUrl="SolutionImageUrl"></AvatarUpload>
          </a-form-item>
          <a-form-item label="Library">
            <a-select v-model="Library" allowClear>
              <a-select-option
                v-for="(item, index) in LibraryInfo "
                :key="index"
                :value="item"
              >{{ item }}</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="PDF File">
            <fileUpload :fileType="fileType" :fileUrl="pdfUrl" @getFileHttpUrl="getFileHttpUrl"></fileUpload>
          </a-form-item>
          <a-form-item label="Remark">
            <a-textarea v-model="Remark" :auto-size="{ minRows: 5}"></a-textarea>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script>
import fileUpload from '@/components/upload/pdfUpload'
import AvatarUpload from '@/components/upload/AvatarUpload'

export default {
  data() {
    return {
      Library: '',
      pdfUrl: '',
      fileType: 'pdf',
      DeptId: '',
      Remark: '',
      CityInfo: [],
      Company: '',
      DCompany: '',
      DCity: '',
      City: '',
      searchText: '',
      tableData: [],
      doType: '',
      totalCount: 0,
      currentPage: 1,
      pageSize: 10,
      Solutions: '',
      DSloution: '',
      DepartmentInfo: [],
      CompanyInfo: [],
      Department: '',
      DLibrary: '',
      moudelVisible: false,
      ModalTitle: '',
      SolutionName: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
      solutionMapList: [],
      tabIndex: 1,
      schemeInfo: [],
      randomSchemeId: '',
      SchemeImage: [],
      Video: '',
      Details: '',
      DDepartment: '',
      CreateBy: '',
      DDateList: [],
      city: '',
      DeptIdList: [],
      LibraryInfo: ['BaseLine', 'LessonLearn'],
      LibraryList: [],
      SolutionId: '',
      SolutionImageUrl: '',
    }
  },
  watch: {
    tableData(val) {
      console.log('tableData :>> ', val)
    },
    DLibrary(val) {
      console.log(' DLibaray:>> ', this.DLibrary)
      this.LibraryList = this.DLibrary ? [this.DLibrary] : []
      this.getTableData()
    },
    DSloution() {
      this.debounce()
    },
  },
  components: {
    fileUpload,
    AvatarUpload,
  },

  created() {
    this.getTableData()
    this.randomSchemeId = this.getUniqueId(20)
  },
  methods: {
    debounce() {
      setTimeout(() => {
        this.getTableData()
      }, 1000)
    },
    getAvatar(e) {
      console.log('图片 :>> ', e)
      if (e) {
        this.SolutionImageUrl = e
      }
    },
    getFileHttpUrl(e) {
      this.pdfUrl = e
      console.log('e :>> ', e)
    },

    // 生成本页面唯一的方案id
    getUniqueId(randomLength) {
      return Number(
        Math.random().toString().substr(3, randomLength) + Date.now()
      ).toString(36)
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      // this.selectedRowKeys = selectedRowKeys
      console.log('row', selectedRows) //选中行的数据
      const index = this.getIndex(this.kindIdList, selectedRows[0].KindId)
      console.log(index, 'index')
      let num = 0
      for (const rowSingle of selectedRows) {
        console.log('rowSingle :>> ', rowSingle.KindId)
        num = num + rowSingle.Price * rowSingle.Quantity
        this.sub_total[index] = num
      }
      // this.sub_total[index] = pk.toDecimal2(this.sub_total[index])
      this.totalAmount = this.sub_total.reduce((x, y) => {
        return x + y
      })
    },
    setRowClassName(row) {},
    // table点击当前行
    rowClick(row) {
      // console.log(text, record)
    },

    changeTabs(e) {
      console.log('changeTabs :>> ', e)
      this.tabIndex = Number(e)
    },
    reset() {
      this.DSloution = ''
      this.DLibrary = ''
    },
    setFormData(data) {
      this.Section = data.Section
    },

    cancleSubmit() {
      // 关闭弹窗 清空数据 避免打开窗口发生切换数据的不良体验
      this.clearCommon()
      this.SolutionId = ''
    },

    clickKindTable(record, index) {
      return {
        on: {
          click: () => {},
        },
      }
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      )
    },
    getTableData() {
      const a = {
        method: 'ShpBaseLineAndLessonLearn_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: this.currentPage,
        limit: this.pageSize,
        orderByList: 'SolutionName',
        datas: {
          SolutionName: this.DSloution ? `%${this.DSloution}%` : '',
          LibraryList: this.DLibrary ? [this.DLibrary] : [],
        },
      }
      this.$post(a).then((result) => {
        console.log('this.tableData  :>> ', this.tableData)
        this.tableData = result.data
        this.totalCount = result.data.length > 0 ? result.data.length : 0
        this.tableData.map((item) => {
          item.CreateTime = item.CreateTime.replace('T', ' ').split('.')[0]
          return item
        })
      })
    },
    search() {
      this.currentPage = 1
      this.getTableData()
    },
    add() {
      this.doType = 'add'
      // 清空参数
      this.ModalTitle = 'Add Scheme'
      this.clearCommon()
      this.moudelVisible = true
    },
    clearCommon() {
      this.SolutionId = ''
      this.SolutionName = ''
      this.DeptId = ''
      this.Library = ''
      this.pdfUrl = ''
      this.Remark = ''
      this.SolutionImageUrl = ''
    },
    // 编辑模组
    editMoudule(item, index) {
      this.clearCommon()
      this.doType = 'edit'
      this.ModalTitle = 'Edit Scheme'
      this.ModuleTipIndex = index
      console.log('item :>> ', item)
      this.SolutionId = item.SolutionId
      this.SolutionName = item.SolutionName
      this.DeptId = item.DeptId
      this.DeptName = item.DeptName
      this.Library = item.Library
      this.pdfUrl = item.PdfFile
      this.Remark = item.Remark
      this.SolutionImageUrl = item.ImageUrl
      this.moudelVisible = true
    },
    //删除模组
    delMoudule(item, index) {
      console.log(item, 'del')
      const that = this
      this.doType = 'del'
      const a = {
        method: 'ShpBaseLineAndLessonLearn_Del',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          SolutionId: item.SolutionId,
        },
      }
      this.$confirm({
        title: 'warm prompt',
        content: 'Do you want to Delete this data?',
        onOk() {
          that.$post(a).then((result) => {
            if (result.code == 0) {
              that.$message.success('successfully delete!')
              that.getTableData()
            }
          })
        },
      })
    },
    changePage(current, pageSize) {
      console.log('current :>> ', current)
      this.currentPage = current
      this.pageSize = pageSize
      this.getTableData()
    },

    addInfo() {
      const a = {
        method: 'ShpBaseLineAndLessonLearn_Add',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          // SolutionId: this.SolutionId,
          SolutionName: this.SolutionName,
          DeptId: this.DeptId,
          Library: this.Library,
          PdfFile: this.pdfUrl,
          Remark: this.Remark,
          ImageUrl: this.SolutionImageUrl,
        },
      }
      this.$post(a).then((result) => {
        if (result.code == 0) {
          this.$message.success('Add successfully!')
          this.getTableData()
        }
        this.moudelVisible = false
      })
    },
    editInfo() {
      const a = {
        method: 'ShpBaseLineAndLessonLearn_Mod',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          SolutionId: this.SolutionId,

          SolutionName: this.SolutionName,
          DeptId: this.DeptId,
          Library: this.Library,
          PdfFile: this.pdfUrl,
          Remark: this.Remark,
          ImageUrl: this.SolutionImageUrl,
        },
      }
      this.$post(a).then((result) => {
        if (result.code == 0) {
          this.$message.success('updated successfully!')
          this.getTableData()
        }
        this.moudelVisible = false
      })
    },
    handleOk() {
      if (!this.SolutionName) {
        this.$message.warn('Please enter the SolutionName')
        return
      } else if (!this.Library) {
        this.$message.warn('Please enter the Library')
        return
      }
      if (this.doType === 'edit') {
        this.editInfo()
      } else if (this.doType === 'add') {
        this.addInfo()
      }
    },
  },
}
</script>

<style lang="less" scoped>
@import url('css/supplierSolution.less');
</style>